<template>
	<view class="my_kefang">
		

<view class="myRoom_card">
	
	<view class="items" v-for="(item,index) in list" :key="index">
		<view class="room_num">
			房间号:{{item.roomnum}}
			
		</view>
		<u-line color="#2979ff"></u-line>
		<view class="room_price" style="color: red;">
			价格: ${{item.room_price}}
			
		</view>
		<u-line color="#2979ff"></u-line>
		<view class="room_type" >
			状态:
			<u-tag 
			 v-if="item.roomstate==0?true:false"
			 style="margin-left: 10rpx; display: inline-block; width: 140rpx;text-align: center;" 
			type="success"
			plain
			text="入住中" > </u-tag>
			
			<u-tag
			 v-if="item.roomstate==1?true:false"
			 style="margin-left: 10rpx; display: inline-block; width:120rpx;text-align: center;" 
			type="error"
			plain
			text="已退房" > </u-tag>
			
		</view>
		<u-line color="#2979ff"></u-line>
		<view class="jaiju_list">
			<view class="item">
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/ketingdeng.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						客厅灯
					</view>
				</view>
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('ketingdeng',1)" 
						 v-if="detail.ketingdeng==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('ketingdeng',0)"  v-if="detail.ketingdeng==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.ketingdeng==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button @click="addROOMreport(item,'ketingdeng')"  v-if="detail.ketingdeng!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			<!-- item -->
			<view class="item">
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/dianshi.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						电视
					</view>
				</view>
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('dianshi',1)"  v-if="detail.dianshi==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('dianshi',0)" v-if="detail.dianshi==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.dianshi==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button @click="addROOMreport(item,'dianshi')"  v-if="detail.dianshi!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			<!-- item -->
			<view class="item">
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/chuangtoudeng.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						床头灯
					</view>
				</view>
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('chuangtoudeng',1)" v-if="detail.chuangtoudeng==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('chuangtoudeng',0)" v-if="detail.chuangtoudeng==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.chuangtoudeng==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button @click="addROOMreport(item,'chuangtoudeng')"  v-if="detail.chuangtoudeng!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			<!-- item -->
			<view class="item">
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/xiyudeng.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						洗浴间灯
					</view>
				</view>
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('xiyujiandeng',1)" v-if="detail.xiyujiandeng==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('xiyujiandeng',0)" v-if="detail.xiyujiandeng==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.xiyujiandeng==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button  @click="addROOMreport(item,'xiyujiandeng')"  v-if="detail.xiyujiandeng!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			<!-- item -->
			<view class="item">
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/zoulangdeng.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						走廊灯
					</view>
				</view>
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('zoulangdeng',1)" v-if="detail.zoulangdeng==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('zoulangdeng',0)" v-if="detail.zoulangdeng==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.zoulangdeng==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button @click="addROOMreport(item,'zoulangdeng')"   v-if="detail.zoulangdeng!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			
			<!-- item -->
			<view class="item">
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/kongtiao.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						空调
					</view>
				</view>
				
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('kongtiao',1)" v-if="detail.kongtiao==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('kongtiao',0)" v-if="detail.kongtiao==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.kongtiao==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button @click="addROOMreport(item,'kongtiao')"  v-if="detail.kongtiao!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			
			<!-- item -->
			<view class="item">
				
				<view class="left">
					<view class="imgs">
						<u--image  src="../../static/bingxiang.png" width="80upx" height="80upx" ></u--image>
					</view>
					<view class="txt">
						冰箱
					</view>
				</view>
				<view class="right">
					 <view class="status" style="width: 120rpx;">
						 <u-button @click="edit('bingxiang',1)" v-if="detail.bingxiang==0?true:false" size="small"  type="warning" text="开启"></u-button>
						 <u-button @click="edit('bingxiang',0)" v-if="detail.bingxiang==1?true:false" size="small"  type="success" text="关闭"></u-button>
						<u-button disabled v-if="detail.bingxiang==3?true:false" size="small"  type="error" text="报修中"></u-button>
					 						 	
					 </view>
					 <view class="baoxiu" style="width: 120rpx;" >
					 	<u-button  @click="addROOMreport(item,'bingxiang')"  v-if="detail.bingxiang!=3?true:false"   size="small"  type="error" text="报修"></u-button>
					 </view>
					
				</view>
			</view>
			
		</view>
		<view class="room_caozuo">
			<!-- 操作: -->
			<u-button @click="tuifang(item)" type="primary" text="退房"></u-button>
		</view>
		
	</view>
	
</view>


		
		
		
	</view>
</template>

<script>
import { Request2 } from '@/until/api.js';
export default {
	data() {
		return {
			list: [],
			addForm: {
				roomnum: '',
				room_price: ''
			},
			detail:"",
			poup_show: false,
		};
	},
	onShow() {
		this.getlist();
	},
	methods: {
	async addROOMreport(item,baoxiuname){
		var requsetdata={
			baoxiuname:baoxiuname,
			user_accout:uni.getStorageSync('account'),
			...item,
			
		}
			var res = await Request2('/fangjian/addROOMreport', 'post', requsetdata);
			if(res.data.code=="200"){
				this.$u.toast("报修成功!");
				this.getlist()
			}else{
				this.$u.toast(res.data.msg);
			}
		},
		// 修改状态
	async edit(name,state){
			if(name=="ketingdeng"){
				this.detail.ketingdeng=state;
			}
			else if(name=="dianshi"){
				this.detail.dianshi=state;
			}
			else if(name=="chuangtoudeng"){
				this.detail.chuangtoudeng=state;
			}
			else if(name=="xiyujiandeng"){
				this.detail.xiyujiandeng=state;
			}
			else if(name=="zoulangdeng"){
				this.detail.zoulangdeng=state;
			}
			else if(name=="kongtiao"){
				this.detail.kongtiao=state;
			}
			else if(name=="bingxiang"){
				this.detail.bingxiang=state;
			}
			var requsetdata=this.detail;
			
			var res = await Request2('/fangjian/editSTATE', 'post', requsetdata);
			if(res.data.code=="200"){
				this.$u.toast("操作成功!");
				this.getlist()
			}else{
				this.$u.toast(res.data.msg);
			}
			
		},
		// 获取房间
		async get_roomDetail(){
			var requsetdata={
				room_id:this.list[0].room_id
			}
			var res = await Request2('/fangjian/room_detail', 'post', requsetdata);
			this.detail = res.data.data[0];
			console.log(this.detail)
		},
		// 退房
		async tuifang(item){
			var user_accout=uni.getStorageSync('account');
			var user_name=uni.getStorageSync('supername');
			var requsetdata={
				id:item.id,
				room_id:item.room_id,
				roomstate:1,
				user_accout:user_accout,
				user_name:user_name,
				
			}
			var res = await Request2('/fangjian/user_tuifang', 'post', requsetdata);
			if(res.data.code=="200"){
				
			
				this.$u.toast("退房成功!");
				this.getlist()
			}else{
				this.$u.toast(res.data.msg);
			}
		},
		//获取列表
		async getlist() {
			var requsetdata = {
				pageNum: 1,
				pageSize: 999,
				user_accout:uni.getStorageSync('account')
			};
			var res = await Request2('/fangjian/subscribeList', 'post', requsetdata);
			this.list = res.data.data;
			if(this.list.length>=1){
				this.get_roomDetail();
			}
			
			console.log(this.list, 'this.list');
		}
	}
};
</script>

<style lang="scss" scoped>
	.jaiju_list{
		.item{
			display: flex;
			justify-content: space-between;
			.right{
				display: flex;
				padding-top: 24upx;
				.status{
					margin: 10upx;
				}
				.baoxiu{
					margin: 10upx;
				}
			}
			.left{
				display: flex;
				.txt{
					padding: 25upx 20upx ;
					font-size: 36upx;
					font-weight: 500;
				}
			}
		}
	}
	.my_kefang{
		background: #f1f1f1;
		min-height: 100vh;
		overflow: hidden;
		.myRoom_card{
			padding: 20rpx;
			.items{
				padding: 20rpx;
				margin: 20rpx 0;
				background: #fff;
				border-radius: 20rpx;
				view{
					margin: 10rpx 0;
				}
			}
		}
	}
	
.top_box {
	margin: 20rpx;
	.addbtn {
		width: 150rpx;
		height: 80rpx;
	}
}
.popup_box {
	// background-color: #fff;
	width: 600upx;
	height: 400upx;

	overflow: hidden;

	box-sizing: border-box;
	// padding: 0 0upx;
	.contnet_box {
		padding: 20upx 20upx;
		.item_input {
			display: flex;
			width: 100%;
			// text-align: center;

			margin: 15upx 0;
			.label {
				line-height: 60upx;
			}
		}
	}

	.tit {
		text-align: center;
		margin-top: 40upx;
		font-size: 38upx;
		font-weight: 500;
	}
	.tips {
		margin: 60upx 0;
		color: #c2c2c2;
		font-size: 34upx;
		letter-spacing: 2upx;
	}
	.code {
		padding: 0;
		padding-left: 15upx;
	}
}

</style>

